<template>
  <div class="welcome">
    <div class="top">
      <div class="top-left">
        <div class="top-left-t">
          <div class="name1">技术的</div>
          <div class="name2">uiadhi</div>
          <div class="shezhi">
            <!-- 设置按钮 -->
            <i class="el-icon-s-tools" @click="shezhi"></i>
          </div>
        </div>
        <div class="top-left-b">
          <el-calendar v-model="value"> </el-calendar>
        </div>
      </div>
      <div class="top-right">
        <div class="top-right-t">
          <div class="top-right-t-l">
            <div class="top-right-t-l-t">123</div>
            <div class="top-right-t-l-b">
              <p>
                <b>{{ city }} {{ weather }}</b>
                <i class="iconfont icon-ziyuan"></i>
              </p>
              <p>{{ week }}</p>
            </div>
          </div>
          <div class="top-right-t-r">任务情况</div>
        </div>
        <div class="top-right-b">
          <div class="zhuxing" ref="zhuxing1"></div>
        </div>
      </div>
    </div>
    <!-- 阶段学习情况 -->
    <div class="bottom">
      <div class="bottom-left">
        <div class="achieveCharts" ref="achieveCharts"></div>
      </div>
      <!-- 期望课程 -->
      <div class="bottom-right">
        <div class="expectCharts" ref="expectCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTarskData, getRateData, getExpectData, getWeather } from "@/api";
// 1 引入echarts
import * as echarts from "echarts";
// 2 初始化echarts
// 需要一个容器  需要一个配置项 注意: 容器一定要有高度
// export default {
//   mounted() {
//     //   请求接口 获取数据
//     //   getTarskData()
//     //   .then(res => {
//     //       console.log(res.data.data);
//     //   })
//     this.$nextTick(function () {
//       let option = {
//           legend:{},//与series系列中的name一一对应 用来图形提示
//         xAxis: {//x轴
//           type: "category",//类别 这里写法表示x轴展示类别
//           data: [],
//         },
//         yAxis: {//y轴
//           type: "value",//展示的是data中的数据
//         },
//         series: [//系列
//         //   {
//         //     name:'产品1',
//         //     label:{//文字数据提示
//         //         show:true,
//         //         // position:'center'
//         //         // 设置提示位置 可以是center inner outer
//         //         // formatter:"{d}%",
//         //         // \n\n很关键 让文字显示在牵引线的上方
//         //     },
//         //     data: [120, 200, 150, 80, 70, 110, 130],
//         //     type: "line",
//         //   },
//           {
//             name:'任务完成情况',
//             data: [],
//             type: "bar",
//           },
//         ],
//       };
//       let generalCharts = echarts.init(this.$refs.zhuxing1);//传递一个DOM元素;
//     //   loading
//     generalCharts.showLoading()//打开加载动画
//     //   传入配置项
//     generalCharts.setOption(option)
//     // 发送异步请求 获取数据
//     getTarskData()
//       .then(res => {
//           let data = res.data.data;
//           let xData = [];//x轴上的data
//         //   series中的数据
//           let sData = data.map(item => {
//               xData.push(item.name)
//               return item.value
//           })
//           console.log(data);
//           console.log(sData);
//           generalCharts.setOption({
//               xAxis:{
//                   data:xData
//               },
//               series:[
//                   {
//                       name:"任务完成情况了",
//                       label:{
//                           show:true
//                       },
//                       data:sData,
//                       type:'bar'
//                   }
//               ]
//           })
//           generalCharts.hideLoading()//关闭加载动画
//       })
//         //  自适应宽度 可以监听浏览器的resize事件,然后调用echarts中的resize方法
//             window.onresize = function () { generalCharts.resize() }
//     });
//   },
// };

export default {
  data() {
    return {
      value: new Date(),
      city: "",
      weather: "",
      week: "",
      // tips:''
    };
  },
  methods: {
    shezhi() {
      this.$router.push({ name: "mine" });
    },
  },
  mounted() {
    this.$nextTick(function () {
      // 获取天气
      getWeather().then((res) => {
        console.log("天气天气", res);
        this.city = res.data.data[0].city; //城市
        this.weather = res.data.data[0].wea; //天气
        this.week = res.data.data[0].week; //周几
        // this.tips = res.data.data[0].air_tips //提示
      });
      let option = {
        // backgroundColor: '#2c343c',//设置全局背景色
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "bottom",
          left: "right",
          orient: "vertical", //排列方向垂直
          itemwidth: 10, //提示宽度
          itemheight: 10, //提示高度2'
          textstyle: {
            //设置字体样式 颜色
            // color: 'white'
          },
        },
        color: ["#2DB5A1", "#EA430C", "#8F85E8"],
      };
      // 任务概况
      let generalCharts = echarts.init(this.$refs.zhuxing1); //传递一个DOM元素;
      //   传入配置项
      generalCharts.setOption(option);
      // 发送异步请求 获取数据
      getTarskData().then((res) => {
        let data = res.data.data;
        let series = {
          name: "bug修复进度",
          type: "pie",
          radius: ["40%", "70%"], //半径
          // roseType: 'angle',//绘制成南丁格尔图 南丁格尔图会通过半径表示数据的大小。
          avoidLabelOverlap: false,
          label: {
            show: false, //是否显示数据
            position: "center", //让数据提示在圆环中间
            formatter: "{d}%",
            // echarts变量
            // a 系列series名称  b 数据名字
            // c 数据的值  d 数据百分比
          },
          emphasis: {
            //强调 鼠标移入到饼图上 会对数据进行强调
            label: {
              show: true,
              fontSize: "15",
              fontWeight: "bold",
              textstyle: {
                fontSize: "20",
                fontWeight: "bolder;",
              },
            },
          },
          labelLine: {
            show: false,
          },
          data,
        };
        generalCharts.setOption({
          series,
        });
      });

      //阶段学习情况
      let achieveCharts = echarts.init(this.$refs.achieveCharts);
      //期望课程
      let expectCharts = echarts.init(this.$refs.expectCharts);
      //折线图选项
      let achieveChartsOption = {
        legend: {
          left: "85%",
          top: "bottom",
        },
        xAxis: {
          //x轴
          type: "category",
          data: [],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false, //是否隐藏坐标轴
        },
        label: {
          //提示内容
          show: true,
          formatter: "{b}:{c}%", //格式化内容
        },
        series: [],
      };
      //期望模块饼图选项
      let expectChartsOption = {
        tooltip: {
          show: true,
          trigger: "item", //散点图和饼图的可以使用item触发
        },
        legend: {
          //表示数据的提示
          top: "5%", //距离顶部偏移5%
          left: "80%", //靠左排列的位置
          top: "bottom", //靠顶部排列的位置
          orient: "vertical", //排列方向 horizontal
          itemWidth: 10, //提示框的宽度
          itemHeight: 10, //提示框的高度
          textStyle: {
            //设置字体样式
            // color:"#fff"//颜色
          },
        },
        color: ["#D75A3A", "#CE1908", "#55A49F"], //设置环形图颜色
        series: [
          //系列
        ],
      };
      achieveCharts.setOption(achieveChartsOption);
      //折线图异步请求
      getRateData().then((res) => {
        let data = res.data.data;
        // console.log(data);
        let xData = [];
        let sData = data.map((item) => {
          xData.push(item.name);
          return item.rate;
        });

        achieveCharts.setOption({
          xAxis: {
            data: xData,
          },
          series: [
            {
              name: "学习进度",
              data: sData,
              type: "line",
              smooth: 1, //是否开启平衡曲线
            },
          ],
        });
      });
      expectCharts.setOption(expectChartsOption);
      //底部环形图异步请求
      getExpectData().then((res) => {
        let data = res.data.data;
        let sData = data.map((item) => {
          return {
            value: item.rate,
            name: item.title,
          };
        });
        expectCharts.setOption({
          series: {
            name: data.desc,
            type: "pie",
            radius: ["40%", "70%"], //半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
            label: {
              //文字数据提示
              show: true,
              position: "outer", //可以是inner center outer设置提示位置
              formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
              // padding: [0, -50]//文字的padding位置
            },
            emphasis: {
              //强调(当鼠标移入的时候显示的强调内容)
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 10, //牵引线长度
              length2: 10,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: sData,
          },
        });
      });
      //  自适应宽度 可以监听浏览器的resize事件,然后调用echarts中的resize方法
      window.onresize = function () {
        generalCharts.resize();
      };
    });
  },
};
</script>

<style scoped>
.welcome {
  color: gray;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: gary;
}
.top {
  display: flex;
  flex: 7;
  justify-content: space-around;
  margin: 5px;
}
.top-left {
  display: flex;
  flex-direction: column;
  flex: 3;
  height: 100%;
  margin-right: 5px;
}
.top-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 7;
}
.top-left-t {
  flex: 4;
  margin-bottom: 5px;
  border: 1px solid black;
}
.top-left-b {
  flex: 6;
  border: 1px solid black;
  height: 100%;
}

.top-left-b >>> .el-calendar__header {
  padding: 0;
}
.top-left-b >>> .el-calendar__body {
  padding: 0;
}
.top-left-b >>> .el-calendar-table thead th {
  padding: 0;
}
.top-left-b >>> .el-calendar-table .el-calendar-day {
  padding: 0;
  height: 20px;
}

.top-right-t {
  display: flex;
  flex: 5;
  margin-bottom: 5px;
}
.top-right-t-l {
  flex: 5;
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}
.top-right-t-l-t {
  flex: 5;
  border: 1px solid black;
  margin-bottom: 5px;
}
.top-right-t-l-b {
  border: 1px solid black;
  flex: 5;
}
.top-right-t-r {
  border: 1px solid black;
  flex: 5;
}

.top-right-b {
  display: flex;
  height: 100%;
  flex: 5;
  border: 1px solid black;
}
.zhuxing {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.bottom {
  display: flex;
  border: 1px solid black;
  flex: 3;
}
.bottom-left {
  flex: 5;
}
.achieveCharts {
  height: 100%;
}
.expectCharts {
  height: 100%;
}
.bottom-right {
  flex: 5;
}
</style>
